<template>
  <div class="login-container">
    <div class="login_from">
      <!--登录表单-->
      <el-form ref="form" :rules="rules" :model="loginForm" class="from_bg">
        <div class="from_img">
          <img src="../../assets/1588929057887.png" style="width: 100%" />
        </div>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          />
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="login">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
const sha256 = require('js-sha256').sha256
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: 'demo',
        password: '123456'
      },
      rules: {
        username: [
          {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[\w-]{4,16}$/,
            message: '用户名不正确',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 20,
            message: '密码长度应该为6-16位之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login() {
      console.log(sha256('123456'))
      const form = {
        username: 'root@admin.com',
        password: sha256('123456')
      }
      // console.log(this.loginForm)

      this.$refs.form.validate(async (isOK) => {
        if (isOK) {
          // console.log(form)
          // alert('校验通过')
          // 请求接口
          // 跳转页面
          await this.$store.dispatch('user/login', form)
          // 跳转首页
          // 小细节
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$bg: #237ef5;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background: url(http://hmmm.itheima.net/img/logingBg.989212c0.png) no-repeat;
  background-position: right bottom;
  background-color: $bg;
  // background-size: cover;
  overflow: hidden;
  .from_img {
    width: 200px;
    margin: 10px auto;
  }
  .yan_imgs {
    margin-top: 5px;
    height: 30px;
  }
  .login_from {
    padding: 10px 40px 0px 40px;
    background-color: #ffffff;
    width: 400px;
    height: 400px;
    margin: 150px auto;
    z-index: 10;
  }
}
</style>
